<template>
  <div>
    <LoginHeader title="欢迎注册" />
    <!-- 注册内容 -->
    <form class="register">
      <h3>
        注册新用户
        <span class="go"
          >我有账号，去
          <router-link to="/login">登录</router-link>
        </span>
      </h3>
      <div class="content">
        <label for="phone">手机号:</label>
        <input
          id="phone"
          type="text"
          v-model="phone"
          placeholder="请输入手机号"
        />
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="content">
        <label for="code">验证码:</label>
        <input
          id="code"
          type="text"
          v-model="code"
          placeholder="请输入验证码"
          autocomplete="off"
        />
        <button class="btn btn-edit" @click.prevent="getCode">
          获取验证码
        </button>
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="content">
        <label for="psd">登录密码:</label>
        <input
          id="psd"
          type="password"
          v-model="password"
          placeholder="请设置登录密码"
          autocomplete="off"
        />
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="content">
        <label for="psd1">确认密码:</label>
        <input
          id="psd1"
          type="password"
          placeholder="请再次确认密码"
          v-model="password1"
          autocomplete="off"
        />
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="controls">
        <input name="m1" type="checkbox" v-model="agree" />
        <span>同意协议并注册《尚品汇用户协议》</span>
        <span class="error-msg">错误提示信息</span>
      </div>
      <div class="btn">
        <button @click.prevent="submitRegister">完成注册</button>
      </div>
    </form>
    <CopyRight />
  </div>
</template>

<script setup>
import LoginHeader from "@/components/LrHeader/LrHeader.vue";
import CopyRight from "@/components/Footer/CopyRight/CopyRight.vue";

import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
components: [LoginHeader, CopyRight];
const $route = useRoute();
const $router = useRouter();
const $store = useStore();
const $state = $store.state;
let phone = ref("");
let password = ref("");
let password1 = ref("");
let code = ref("");
let agree = ref(false);
const getCode = async () => {
  try {
    let res = phone && (await $store.dispatch("register/getCode", phone));
    if (res) {
      code = $store.state.register.userCode; //获取验证码并赋值data.code
    }
  } catch (error) {
    console.log(error);
  }
};
const submitRegister = async () => {
  try {
    let res =
      phone &&
      code &&
      password == password1 &&
      agree &&
      (await $store.dispatch("register/userRegister", {
        phone,
        password,
        code,
      }));
    if (res) {
      $router.push("/login");
    }
  } catch (error) {}
};
</script>

<style lang="less" scoped>
.register {
  width: 1200px;
  height: 445px;
  border: 1px solid rgb(223, 223, 223);
  margin: 0 auto;

  h3 {
    background: #ececec;
    margin: 0;
    padding: 6px 15px;
    color: #333;
    text-align: center;
    margin-left: 150px;
    border-bottom: 1px solid #dfdfdf;
    font-size: 20.04px;
    line-height: 30.06px;

    span {
      font-size: 14px;
      float: right;
      a {
        color: #e1251b;
      }
    }
  }

  div:nth-of-type(1) {
    margin-top: 30px;
  }

  .content {
    padding-left: 390px;
    margin-bottom: 30px;
    position: relative;

    label {
      font-size: 14px;
      width: 96px;
      text-align: right;
      display: inline-block;
    }

    input {
      width: 270px;
      height: 38px;
      padding-left: 8px;
      box-sizing: border-box;
      margin-left: 10px;
      outline: none;
      border: 1px solid #999;
    }
    .btn {
      display: inline-block;
      margin-top: 0px;
      margin-left: 8px;
      padding: 6px 10px;
      font-size: 14px;
      line-height: 20px;
      text-align: left;
      cursor: pointer;
      border-radius: 4px;
    }

    .btn-edit {
      color: rgb(0, 0, 0);
      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(173, 173, 173);
    }

    .btn-edit:hover {
      color: #fff;
      background-color: #c5c5c5;
    }

    .error-msg {
      margin-top: 6px;
      position: absolute;
      top: 100%;
      left: 500px;
      color: #3498db;
    }
  }

  .controls {
    text-align: center;
    position: relative;
    margin-bottom: 30px;
    input {
      vertical-align: middle;
    }
    m1 {
      vertical-align: middle;
    }
    span {
      margin-left: 6px;
      vertical-align: middle;
    }
    .error-msg {
      margin-top: 6px;
      position: absolute;
      top: 100%;
      left: 500px;
      color: #3498db;
    }
  }

  .btn {
    text-align: center;
    line-height: 36px;
    margin: 17px 0 0 55px;

    button {
      outline: none;
      width: 270px;
      height: 36px;
      background: #3498db;
      border: none;
      color: #fff !important;
      display: inline-block;
      font-size: 16px;
    }
  }
}
</style>
